<template>
  <div style="width:100%;height:100%;overflow:hidden;text-align:center">
    <div>8月</div>
    <div style="display:flex" v-for="i in data.length / 7">
      <div style="flex:1" v-for="j in 7">
        <div>{{data[j - 1 + (i - 1) * 7].label}}</div>
        <div>{{data[j - 1 + (i - 1) * 7].value}}</div>
        <div>{{data[j - 1 + (i - 1) * 7].desc}}</div>
      </div>
    </div>
    <div>合计：{{sum}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '日'
        }, {
          label: '一'
        }, {
          label: '二'
        }, {
          label: '三'
        }, {
          label: '四'
        }, {
          label: '五'
        }, {
          label: '六'
        }, {}, {}, {
          label: 1
        }, {
          label: 2
        }, {
          label: 3
        }, {
          label: 4
        }, {
          label: 5,
          value: 500,
          desc: '20:30到医院'
        }, {
          label: 6,
          value: 500
        }, {
          label: 7
        }, {
          label: 8
        }, {
          label: 9
        }, {
          label: 10
        }, {
          label: 11
        }, {
          label: 12
        }]
      }
    },
    computed: {
      sum() {
        var res = 0
        this.data.forEach(item => {
          item.value && (res += item.value)
        })
        return res
      }
    }
  }
</script>
